<template>
  <div class="zhuchi-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          class="nav-item"
          :class="{ active: activeTab === tab.id }"
          @click="switchTab(tab.id)"
        >
          {{ tab.label }}
        </button>
      </div>
      
      <div class="content-area">
        <!-- 部门概况 -->
        <div v-show="activeTab === 'overview'" class="module-card">
          <h3>部门概况</h3>
          <p>主持队是东软之声广播台核心部门之一，主要负责校园各类活动主持工作。我们的主要职责包括：</p>
          <ul class="department-features">
            <li>负责校内各类晚会、活动的主持工作</li>
            <li>主持稿的撰写与排练</li>
            <li>培养新成员的主持与表达能力</li>
            <li>参与台内活动策划</li>
          </ul>
          <div class="department-image">
            <img src="@/assets/主持.jpg" alt="主持队团队" />
          </div>
        </div>

        <!-- 现任部长 -->
        <div v-show="activeTab === 'minister'" class="module-card">
          <h3>现任部长</h3>
          <div class="minister-list">
            <div class="minister-item">
              <img src="@/assets/logo.jpg" alt="部长头像" class="avatar"/>
              <div class="minister-info">
                <h4>王芳</h4>
                <p><i class="iconfont icon-grade"></i> 2023级 汉语言文学</p>
                <p><i class="iconfont icon-phone"></i> 联系电话: 13700137000</p>
                <p><i class="iconfont icon-email"></i> 邮箱: wangfang23@dnui.edu.cn</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人中心 -->
        <div v-show="activeTab === 'profile'" class="module-card">
          <h3>个人中心</h3>
          <form class="profile-form">
            <div class="form-group">
              <label>姓名</label>
              <input type="text" v-model="userInfo.name" />
            </div>
            <div class="form-group">
              <label>学号</label>
              <input type="text" v-model="userInfo.studentId" disabled />
            </div>
            <div class="form-group">
              <label>专业</label>
              <input type="text" v-model="userInfo.major" />
            </div>
            <div class="form-group">
              <label>联系电话</label>
              <input type="tel" v-model="userInfo.phone" />
            </div>
            <button type="button" class="save-btn" @click="saveProfile">保存信息</button>
          </form>
        </div>

        <!-- 主持经历 -->
        <div v-show="activeTab === 'experience'" class="module-card">
          <div class="experience-header">
            <h3>主持经历</h3>
            <button @click="goToDetail()" class="add-btn">
              <i class="iconfont icon-add"></i> 添加经历
            </button>
          </div>
          
          <div class="experience-list">
            <div v-for="(item, index) in experiences" :key="item.id" class="experience-item">
              <div class="experience-info">
                <h4>{{ item.event }}</h4>
                <p><span class="label">日期:</span> {{ item.date }}</p>
                <p><span class="label">角色:</span> {{ item.role }}</p>
                <p v-if="item.notes"><span class="label">备注:</span> {{ item.notes }}</p>
              </div>
              <div class="experience-actions">
                <button @click="goToDetail(item.id)" class="view-btn">查看</button>
                <button @click="goToDetail(item.id)" class="edit-btn">编辑</button>
                <button @click="deleteExperience(item.id)" class="delete-btn">删除</button>
              </div>
            </div>
            <div v-if="experiences.length === 0" class="empty-state">
              <p>暂无主持经历记录</p>
              <button @click="goToDetail()" class="add-first-btn">添加第一条经历</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

// 标签页管理
const tabs = [
    { id: 'overview', label: '部门概况' },
    { id: 'minister', label: '现任部长' },
    { id: 'profile', label: '个人中心' },
    { id: 'experience', label: '主持经历' }
  ]
  
const activeTab = ref('overview')
console.log('zhuchi.vue mounted');
console.log('activeTab initial value:', activeTab.value);
console.log('tabs data:', tabs);
console.log('authStore.isLoggedIn:', authStore.isLoggedIn);

// 检查登录状态
onMounted(() => {
  console.log('进入onMounted钩子');
  console.log('authStore.isLoggedIn初始值:', authStore.isLoggedIn);
  if (!authStore.isLoggedIn) {
    console.log('未登录，准备重定向到登录页');
    router.push('/login');
  } else {
    console.log('已登录，加载用户信息');
  }
  if (!authStore.isLoggedIn) {
      console.log('执行重定向到登录页');
      router.push('/login').catch(err => {
        console.error('重定向失败:', err);
      });
    }

  // 从 localStorage 读取用户信息
    const userInfoData = localStorage.getItem('userInfo')
    if (userInfoData) {
      try {
        userInfo.value = JSON.parse(userInfoData)
        console.log('用户信息解析成功:', userInfo.value)
      } catch (e) {
        console.error('用户信息解析失败:', e)
        localStorage.removeItem('userInfo') // 清除无效数据
      }
    }
})



const switchTab = (tabId) => {
  activeTab.value = tabId;
  console.log('切换到标签:', tabId, '当前activeTab状态:', activeTab.value);
}

// 个人中心数据
const userInfo = ref({
  name: '',
  studentId: '',
  major: '',
  phone: ''
})

const saveProfile = () => {
  console.log('保存个人信息:', userInfo.value)
  // 将更新后的用户信息保存到 localStorage
  localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
  alert('个人信息已保存')
}

// 从localStorage加载主持经历并确保每个项都有id
const loadExperiences = () => {
  const saved = localStorage.getItem('主持经历')
  if (!saved) return []
  
  const experiences = JSON.parse(saved)
  // 为没有id的项添加唯一id
  return experiences.map(item => {
    if (!item.id) {
      item.id = Date.now().toString() + Math.floor(Math.random() * 1000)
    }
    return item
  })
}

// 主持经历数据
const experiences = ref(loadExperiences())

// 跳转到详情页（添加/编辑）
const goToDetail = (id) => {
  alert('goToDetail called with id: ' + id);
  console.log('Navigating to detail with id:', id);
  console.log('Target path:', `/buyuan/zhuchi/detail/${id || ''}`);
  router.push(`/buyuan/zhuchi/detail/${id || ''}`)
}

// 删除主持经历
const deleteExperience = (id) => {
  if (confirm('确定要删除这条主持经历吗？')) {
    const updated = experiences.value.filter(item => item.id !== id)
    experiences.value = updated
    localStorage.setItem('主持经历', JSON.stringify(updated))
  }
}

// 监听路由变化，刷新数据
router.afterEach((to) => {
  if (to.path === '/buyuan/zhuchi') {
    experiences.value = loadExperiences()
  }
})
</script>

<style scoped>
.zhuchi-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.management-main {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  min-height: 400px;
}

.left-nav {
  width: 220px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: block;
  padding: 12px 15px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s;
  border: none;
  background: none;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #f0f7ff;
  color: #3498db;
}

.nav-item.active {
  background-color: #3498db;
  color: white;
  font-weight: 500;
}

.content-area {
  flex: 1;
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-card {
  margin-bottom: 25px;
}

.module-card h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.department-features {
  margin: 15px 0;
  padding-left: 20px;
}

.department-features li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.department-image {
  margin-top: 20px;
}

.department-image img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 6px;
}

.minister-item {
  display: flex;
  gap: 20px;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.minister-info h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.minister-info p {
  margin-bottom: 8px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
  transition: all 0.3s;
}

.download-item:hover {
  background-color: #f0f7ff;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-size {
  color: #777;
  font-size: 0.9rem;
}

.download-btn {
  padding: 6px 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s;
}

.download-btn:hover {
  background-color: #2980b9;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-weight: 500;
  color: #555;
}

.form-group input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}

.save-btn {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #45a049;
}
.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.add-btn {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.experience-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.experience-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.experience-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.experience-info {
  flex: 1;
}

.experience-info h4 {
  margin-bottom: 8px;
  color: #2c3e50;
}

.label {
  font-weight: 500;
  color: #555;
  margin-right: 5px;
}

.experience-actions {
  display: flex;
  gap: 10px;
}

.view-btn,
.edit-btn,
.delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.view-btn {
  background-color: #3498db;
  color: white;
}

.edit-btn {
  background-color: #f39c12;
  color: white;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.add-first-btn {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>